<template>
	<view class="wrap">
		<div class="" v-if="activity">
			<image :src="globalConfig.imagePrefix + activity.icon" class="bg" mode=""></image>

			<uni-nav-bar left-icon="back" @clickLeft="$tab.back()" :statusBar="true" :fixed="true" :border="false"
				backgroundColor="transparent" color="#FFF"></uni-nav-bar>

			<view class="flex items-center text-FFF countdown" v-if="countdown > 0" :style="{
				background: `url(${globalConfig.imagePrefix + activity.cover}) no-repeat`,
				backgroundSize: '100% 100%'
			}">
				<text class="mr-12">限时秒杀剩余:</text>
				<u-count-down :time="countdown" format="HH:mm:ss" autoStart millisecond @change="onChange">
					<view class="flex items-center" v-if="timeData">
						<view class="">
							{{ timeData.hours >= 10 ? timeData.hours : '0' + timeData.hours }}
						</view>
						<text class="time__doc">小时</text>
						<view class="">
							{{ timeData.minutes >= 10 ? timeData.minutes : '0' + timeData.minutes }}
						</view>
						<text class="">分</text>
						<view class="">
							{{ timeData.seconds >= 10 ? timeData.seconds : '0' + timeData.seconds }}
						</view>
						<text class="">秒</text>
					</view>
				</u-count-down>
				<text class="ml-12">后失效</text>
			</view>

			<div class="mt-48 px-20">
				<uv-waterfall ref="waterfall" v-model="list" :add-time="10" :column-gap="columnGap"
					@changeList="changeList">
					<template v-slot:list1>
						<view>
							<view v-for="(item, index) of list1" :key="item.id" class="bg-FFF mb-28 round-12 pb-20"
								@click="goShopDetal(item)" style="background-color: #F7F6F4;">
								<image :src="globalConfig.imagePrefix + item.cover" mode="widthFix"
									class="round-12 w-full">
								</image>
								<view class="px-16">
									<view class="text-28 mt-12 u-line-2">
										{{ item.name }}
									</view>
									<view class="text-32 mt-12 sprice">
										{{ item.nowPrice }}元
									</view>
								</view>
							</view>
						</view>
					</template>
					<template v-slot:list2>
						<view>
							<view v-for="(item, index) of list2" :key="item.id" class="bg-FFF mb-28 round-12 pb-20"
								@click="goShopDetal(item)" style="background-color: #F7F6F4;">
								<image :src="globalConfig.imagePrefix + item.cover" mode="widthFix"
									class="round-12 w-full">
								</image>
								<view class="px-16">
									<view class="text-28 mt-12 u-line-2">
										{{ item.name }}
									</view>

									<view class="text-32 mt-12 sprice">
										{{ item.price }}元
									</view>
								</view>
							</view>
						</view>
					</template>
				</uv-waterfall>
			</div>
		</div>
		<div class="" v-else>
			<image src="https://file.fulewanjia.com/fulewanjia/profile/appImages4/quwei_bg@2x.png" class="bg" mode=""></image>
			
			<uni-nav-bar left-icon="back" @clickLeft="$tab.back()" :statusBar="true" :fixed="true" :border="false"
				backgroundColor="transparent" color="#FFF"></uni-nav-bar>
				
			<div class="empty flex justify-around items-center">
				<div class="text-44 font-700 text-white">
					暂无活动
				</div>
			</div>
		</div>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				activity: null,
				countdown: null,
				globalConfig: getApp().globalData.config,
				timeData: null,


				page: 1,
				pageSize: 10,
				loadStatus: "loadmore",
				list: [], // 瀑布流全部数据
				list1: [], // 瀑布流第一列数据
				list2: [], // 瀑布流第二列数据
				columnGap: 10, //中间空
			};
		},
		onLoad() {
			this.getData()
		},
		onReachBottom() {
			this.loadList()
		},
		methods: {
			changeList(e) {
				this[e.name].push(e.value);
			},
			goShopDetal(item) {
				this.$tab.nav(`/pages/commodity/detail?id=${item.id}&storeId=${item.storeId}`)
			},
			onChange(e) {
				this.timeData = e
				if (e.days == 0 && e.hours == 0 && e.milliseconds == 0 && e.minutes == 0 && e.seconds == 0) {
					this.getDetail()
				}
			},
			async getData() {
				const res = await this.$Api.index.getActivityInfo()
				this.activity = res.activity
				this.countdown = res.countdown

				if (res.countdown > 0) {
					this.$nextTick(() => {
						this.refreshList()
					})
				}
			},
			refreshList() {
				this.page = 1;
				this.loadStatus = "loadmore";
				this.list = []
				this.$refs.waterfall.clear();
				this.list1 = []
				this.list2 = []
				this.loadList();
			},
			loadList() {
				if (this.loadStatus == "loadmore") {
					this.loadStatus = "loading";
					setTimeout(() => {
						uni.stopPullDownRefresh();

						this.$Api.index.getProductsList({
							pageNum: this.page,
							pageSize: this.pageSize,
							columnType: 11,
							groupBuy: this.activity.id
						}).then((res) => {

							if (this.page == 1) {
								if (res.rows && res.rows.length > 0) {
									this.list.push(...res.rows)
								}
							} else {
								this.list.push.apply(this.list, res.rows || []);
							}

							this.loadStatus = "loadmore";

							if (res.total == 0) {
								this.loadStatus = "empty";
							} else if (this.list.length >= res.total) {
								this.loadStatus = "nomore";
							} else {
								this.page++;
							}
						});
					}, 200);
				}
			},
		}
	}
</script>

<style lang="scss">
	.bg {
		width: 100%;
		height: 100%;
		position: fixed;
		top: 0;
		left: 0;
		z-index: -1;
	}

	/deep/ .countdown {
		width: 568rpx;
		height: 68rpx;
		padding: 20rpx 20rpx 20rpx 68rpx;
		margin: 102rpx auto 0;
	}
	
	.empty{
		width: 100%;
		height: 100%;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 2;
	}
</style>